import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { AreaItemWrapper } from "./style";
import { formatTime, formatUrlSize } from "@/utils/format";
import { useNavigate } from "react-router-dom";

interface IProps {
  children?: ReactNode;
  itemData: any,
  playCount?: number
}

const AreaItemv3: FC<IProps> = (props: IProps) => {
  const { itemData, playCount } = props
  const navigate = useNavigate()
  const handleClick = (id: number) => {
    navigate(`/album/${id}`)
  }

  return <AreaItemWrapper>
    <div className="areav3-left">
      <div className="song-cover" onClick={() => handleClick(itemData.al.id)}>
        <img src={formatUrlSize(itemData.al.picUrl, 120)} alt="歌曲图片" />
      </div>
      <div className="container">
        <div className="title">{itemData.name}</div>
        <div className="artist">{itemData.ar[0].name}</div>
      </div>
    </div>
    <div className="areav3-center">
      {itemData.al.name}
    </div>
    <div className="areav3-right">
      <div className="icon"></div>
      {itemData?.dt && <div className="time">{formatTime(itemData.dt / 1000)}</div>}
      {playCount && <div className="play-count">{itemData.playCount}</div>}
    </div>
  </AreaItemWrapper>;
};

export default memo(AreaItemv3);